<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流浪者专题</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/zy.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <a href="#" class="logo">
                    <i class="fas fa-paw"></i>
                    因论派的档案馆
                </a>
                <nav>
                    <ul>
                        <li><a href="#">动态</a></li>
                        <li><a href="#">讨论</a></li>
                        <li><a href="#">专题</a></li>
                        <li><a href="#">相册</a></li>
                        <li><a href="#">书籍</a></li>
                        <li><a href="#">更多</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    
    <div class="container">
        <div class="main-layout">
            <aside class="sidebar">
                <!-- 个人资料卡片 -->
                <div class="profile-card">
                    <img src="img/tx.jpg" alt="头像" class="avatar">
                    <div class="username">你好</div>
                    <!-- 社交链接 -->
                    <div class="social-links">
                        <i class="fab fa-bilibili" style="color: #ff729f; font-size: 24px;"></i><a href="https://space.bilibili.com/1705968358/dynamic?spm_id_from=333.1387.list.card_avatar.click">
                            @因论派的档案馆</a>
                    </div>
                </div>
                
                <!-- 第一个分类卡片 -->
                <div class="category-card">
                    <ul class="category-list">    
                        <li class="category-item">
                            <a href="#" class="category-link">
                                <span>流浪者 角色档案</span>
                            </a>
                        </li>
                        <li class="category-item">
                            <a href="#" class="category-link">
                                <span>考据组 思维导图</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <!-- 第二个分类卡片 - 带子分类 -->
                <div class="category-card">
                    <h3 class="category-title">
                        <i class="fas fa-th-list"></i>分类
                    </h3>
                    <ul class="category-list">
                        <li class="category-item">
                            <div class="category-link">
                                <span>流浪者相关</span>
                                <span class="category-count">(25篇)</span>
                                <i class="fas fa-chevron-right toggle-icon"></i>
                            </div>
                            <ul class="subcategory-list">
                                <li class="subcategory-item">
                                    <a href="#" class="subcategory-link">命座解析</a>
                                </li>
                                <li class="subcategory-item">
                                    <a href="#" class="subcategory-link">背景与思想</a>
                                </li>
                                <li class="subcategory-item">
                                    <a href="#" class="subcategory-link">有关意向</a>
                                </li>
                                <li class="subcategory-item">
                                    <a href="#" class="subcategory-link">组织关系</a>
                                </li>
                            </ul>
                        </li>
                        <li class="category-item">
                            <div class="category-link">
                                <span>提瓦特世界观</span>
                                <span class="category-count">(15篇)</span>
                                <i class="fas fa-chevron-right toggle-icon"></i>
                            </div>
                            <ul class="subcategory-list">
                                <li class="subcategory-item">
                                    <a href="#" class="subcategory-link">Node.js</a>
                                </li>
                                <li class="subcategory-item">
                                    <a href="#" class="subcategory-link">Express</a>
                                </li>
                                <li class="subcategory-item">
                                    <a href="#" class="subcategory-link">MongoDB</a>
                                </li>
                            </ul>
                        </li>
                        <li class="category-item">
                            <div class="category-link">
                                <span>神话典故与物品</span>
                                <span class="category-count">(20篇)</span>
                                <i class="fas fa-chevron-right toggle-icon"></i>
                            </div>
                            <ul class="subcategory-list">
                                <li class="subcategory-item">
                                    <a href="#" class="subcategory-link">算法</a>
                                </li>
                                <li class="subcategory-item">
                                    <a href="#" class="subcategory-link">数据结构</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </aside>
            
            <main class="content">
                <section class="welcome-section">
                    <div class="welcome-text">
                        <h1 class="welcome-title">欢迎来到因论派的档案馆</h1>
                        <p class="welcome-desc">
                            搬运群聊内容，所发考据百无禁忌，以流浪者为中心。<br>
                            通过游戏内外的证据与线索推测还原流浪者过去与将来的秘密。<br>
                            仅供参考。
                        </p>
                    </div>
                    <div class="welcome-image">
                        <img src="img/0.jpg" alt="欢迎图">
                    </div>
                </section>
                
                <section class="recent-blogs">
                    <h2 class="blogs-title">
                        <i class="fas fa-history"></i>最近
                    </h2>
                    <div class="blog-grid">
                        <!-- 博客卡片1 -->
                        <article class="blog-card">
                            <img src="http://i0.hdslb.com/bfs/new_dyn/7cae4a6c207ee04d43874b6c67b2041c1705968358.png" alt="博客封面图" class="blog-image">
                            <div class="blog-content">
                                <h3 class="blog-title">驳阿贾克斯潘神论</h3>
                                <p class="blog-excerpt">
                                    水仙十字系列任务雷内的笔记提及《阿贾克斯》一剧以及“原初之人”
其中《阿贾克斯》一剧的原著为索福克勒斯的悲剧《埃阿斯》：
                                </p>
                                <a href="#" class="read-more">Read More →</a>
                            </div>
                        </article>
                        
                        <!-- 博客卡片2 -->
                        <article class="blog-card">
                            <img src="http://i0.hdslb.com/bfs/new_dyn/d30bb6bbf52999ef545c817182768d161705968358.png" alt="博客封面图" class="blog-image">
                            <div class="blog-content">
                                <h3 class="blog-title">被篡改的“乐园”与“新月”</h3>
                                <p class="blog-excerpt">
                                    按照菈乌玛专武“纺夜天镜”文案来看，亥珀波瑞亚的遗民，也就是霜月之子当年流传的预言，其实是开头那几句话：

[不再为『永恒』庇护的世界正走向终末』
「直到『乐园』降临，拨转起原初的纺轮 ]</p>
                                <a href="#" class="read-more">Read More →</a>
                            </div>
                        </article>
                        
                        <!-- 博客卡片3 -->
                        <article class="blog-card">
                            <img src="http://i0.hdslb.com/bfs/new_dyn/6046acecf28dca6aae3d28b568162d191705968358.png" alt="博客封面图" class="blog-image">
                            <div class="blog-content">
                                <h3 class="blog-title">黑猫的梦</h3>
                                <p class="blog-excerpt">
                                    流浪者“神造的超越者”之“神”，按照诺斯替文本的观念，应该理解为彼岸的异乡神所创造出超越的存在，因为自他流溢而出的移涌本质上都相当于他的分身</p>
                                <a href="#" class="read-more">Read More →</a>
                            </div>
                        </article>
                        
                        <!-- 博客卡片4 -->
                        <article class="blog-card">
                            <img src="https://picsum.photos/400/300?random=6" alt="博客封面图" class="blog-image">
                            <div class="blog-content">
                                <h3 class="blog-title">行动是打败焦虑最好的办法</h3>
                                <p class="blog-excerpt">
                                    这个是一个CSS属性，用来定义网格布局中的列的数量和大小。这个属性的值是一个空格分隔的列表，每个值表示一个列的大小。这个属性的值。
                                </p>
                                <div class="blog-meta">
                                    <span>2023-12-20T09:30:15.000Z</span>
                                    <span><i class="far fa-eye"></i> 0</span>
                                </div>
                                <a href="#" class="read-more">Read More →</a>
                            </div>
                        </article>
                        
                        <!-- 博客卡片5 -->
                        <article class="blog-card">
                            <img src="https://picsum.photos/400/300?random=7" alt="博客封面图" class="blog-image">
                            <div class="blog-content">
                                <h3 class="blog-title">做自己的自由树</h3>
                                <p class="blog-excerpt">
                                    这个是一个CSS属性，用来定义网格布局中的列的数量和大小。这个属性的值是一个空格分隔的列表，每个值表示一个列的大小。这个属性的值。
                                </p>
                                <div class="blog-meta">
                                    <span>2023-12-18T15:22:30.000Z</span>
                                    <span><i class="far fa-eye"></i> 0</span>
                                </div>
                                <a href="#" class="read-more">Read More →</a>
                            </div>
                        </article>
                        
                        <!-- 博客卡片6 -->
                        <article class="blog-card">
                            <img src="https://picsum.photos/400/300?random=8" alt="博客封面图" class="blog-image">
                            <div class="blog-content">
                                <h3 class="blog-title">谁放弃，谁是大笨蛋</h3>
                                <p class="blog-excerpt">
                                    这个是一个CSS属性，用来定义网格布局中的列的数量和大小。这个属性的值是一个空格分隔的列表，每个值表示一个列的大小。这个属性的值。
                                </p>
                                <div class="blog-meta">
                                    <span>2023-12-15T10:15:45.000Z</span>
                                    <span><i class="far fa-eye"></i> 0</span>
                                </div>
                                <a href="#" class="read-more">Read More →</a>
                            </div>
                        </article>
                    </div>
                </section>
            </main>
        </div>
    </div>

    <script>
        // 为分类项添加点击展开/折叠功能
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有带有子分类的分类项
            const categoryLinks = document.querySelectorAll('.category-link');
            
            categoryLinks.forEach(link => {
                // 检查当前分类是否有子分类
                const subcategoryList = link.nextElementSibling;
                if (subcategoryList && subcategoryList.classList.contains('subcategory-list')) {
                    // 为包含子分类的项添加点击事件
                    link.addEventListener('click', function() {
                        // 切换子分类列表的展开/折叠状态
                        subcategoryList.classList.toggle('expanded');
                        
                        // 切换箭头图标的旋转状态
                        const toggleIcon = link.querySelector('.toggle-icon');
                        if (toggleIcon) {
                            toggleIcon.classList.toggle('rotate');
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>
    